<script setup lang="ts">
import {ref, watch} from 'vue';
import {timeAgoConvert} from "@/util/timeUtil";
import NODATA from '@/assets/post/noData.png'

const props = defineProps({
  // 评论列表
  commentList: {
    type: Array<any>,
    default: () => []
  },
  isEnd: {
    type: Boolean,
    default: () => false
  },
  total: {
    type: Number,
    default: () => 0
  },
  currentPage: {
    type: Number,
    default: () => 1
  },
  pageSize: {
    type: Number,
    default: () => 10
  }
});
const emit = defineEmits(['changePage'])
const currentPage = ref(props.currentPage)
const pageSize = ref(props.pageSize)
const total = ref(props.total)
watch(() => props.currentPage, (newValue) => {
  currentPage.value = newValue
})
watch(() => props.total, (newValue) => {
  total.value = newValue
})
const onChange = (pageNumber: number) => {
  console.log('Page: ', pageNumber);
  emit('changePage', pageNumber)
};
</script>

<template>
  <section class="userCommentListByPane">
    <div class="userCommentListByPaneMain">
      <template v-for="item in commentList" :key="item.uid">
        <a-comment>
          <template #actions>
            <span>来源:<i class="ml-0.5 not-italic text-blue-300">{{ item.sourceName }}</i></span>
            <span class="mr-2" v-if="item.auditName">审核人:
              <i class="ml-0.5 not-italic text-red-300">
              {{ item.auditName }}
              </i>
            </span>
            <span class="" v-if="item.auditTime">审核时间:{{ item.auditTime }}</span>
          </template>
          <template #author v-if="item.user">
            <a class="text-[14px] font-semibold !text-blue-500">{{ item.user.nickName }}</a>
          </template>
          <template #avatar v-if="item.user">
            <a-avatar :src="item.user.photoUrl" :alt="item.user.nickName"/>
          </template>
          <template #content>
            <div class="commentContentByPane max-w-full line-clamp-1" v-highlight v-html="item.content"/>
          </template>
          <template #datetime>
            <time class="mr-2">发表时间:{{ timeAgoConvert(item.createTime) }}</time>
          </template>
        </a-comment>
      </template>
    </div>
    <a-pagination
        v-if="commentList.length > 0"
        v-model:current="currentPage"
        v-model:page-size="pageSize"
        :hideOnSinglePage="true"
        show-quick-jumper
        :total="total"
        @change="onChange"/>
    <div v-if="isEnd && commentList.length == 0">
      <a-empty
         class="flex flex-col justify-center items-center"
         :image="NODATA"
         :image-style="{height: '280px'}">
        <template #description>
          <span class="text-slate-400">嘿！这里没有数据，就像沙漠里没水一样。</span>
        </template>
      </a-empty>
    </div>
  </section>
</template>

<style scoped lang="less">

</style>
